<template>
    <div class="login-container">
        <div class="login-wrapper-left animated bounceInDown">
            <div class="login-left">
                <img class="img" src="/images/logo/logo-white.png">
            </div>
        </div>
        <particles/>
        <div class="login-wrapper-right animated bounceInDown">
            <div class="login-border">
                <div class="login-main">
                    <h4 class="login-title">
                        Web UI
                    </h4>
                    <el-form class="login-form"
                             status-icon
                             :rules="loginRules"
                             ref="loginForm"
                             :model="loginForm"
                             label-width="0">
                        <el-form-item prop="name">
                            <el-input size="small"
                                      @keyup.enter.native="handleLogin"
                                      v-model="loginForm.name"
                                      auto-complete="off"
                                      placeholder="请输入用户名">
                                <i slot="prefix" class="el-icon-user"/>
                            </el-input>
                        </el-form-item>
                        <el-form-item prop="password">
                            <el-input size="small"
                                      @keyup.enter.native="handleLogin"
                                      :type="passwordType"
                                      v-model="loginForm.password"
                                      auto-complete="off"
                                      placeholder="请输入密码">
                                <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"/>
                                <i slot="prefix" class="el-icon-lock"/>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary"
                                       size="small"
                                       @click.native.prevent="handleLogin"
                                       class="login-submit">登录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import particles from "@/components/particles/particles";

    export default {
        name: "login",
        components: {particles},
        data() {
            return {
                loginForm: {
                    name: "pnoker",
                    password: "dc3dc3dc3"
                },
                loginRules: {
                    name: [
                        {required: true, message: "请输入用户名", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入密码", trigger: "blur"},
                        {min: 1, message: "密码长度最少为6位", trigger: "blur"}
                    ]
                },
                passwordType: "password"
            };
        },
        methods: {
            showPassword() {
                this.passwordType === ""
                    ? (this.passwordType = "password")
                    : (this.passwordType = "");
            },
            handleLogin() {
                this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '登录中,请稍后。。。',
                            spinner: "el-icon-loading"
                        });
                        this.$store.dispatch("GenerateToken", this.loginForm).then(() => {
                            this.$router.push({path: '/'});
                            setTimeout(() => loading.close(), 500);
                        }).catch(() => {
                            loading.close()
                        });
                    }
                });
            }
        }
    };
</script>

<style lang="scss">
    @import "~@/assets/styles/login.scss";
</style>
